<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目验收申请表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 20px;
        }
        .page-title {
            font-size: 18px;
            font-weight: bold;
        }
        .toolbar {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        .search-area {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        .search-label {
            font-size: 14px;
        }
        .search-input {
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 200px;
        }
        .btn {
            padding: 6px 12px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            background-color: #e0e0e0;
            color: #333;
        }
        .btn-primary {
            background-color: #1890ff;
            color: white;
        }
        .btn-danger {
            background-color: #ff4d4f;
            color: white;
        }
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .table th, .table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        .table th {
            background-color: #f5f5f5;
            font-weight: normal;
        }
        .status-pending {
            color: #faad14;
        }
        .status-approved {
            color: #52c41a;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        .modal-content {
            position: relative;
            background-color: #fff;
            margin: 100px auto;
            padding: 20px;
            width: 80%;
            max-width: 800px;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
        }
        .modal-title {
            font-size: 16px;
            font-weight: bold;
        }
        .close {
            font-size: 20px;
            cursor: pointer;
        }
        .modal-body {
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }
        .form-control {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .file-list {
            border: 1px solid #e0e0e0;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        .file-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        .file-icon {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }
        .file-name {
            flex-grow: 1;
            font-size: 14px;
        }
        .file-size {
            color: #999;
            font-size: 12px;
            margin-right: 10px;
        }
        .upload-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            border: 1px dashed #d9d9d9;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        .upload-btn:hover {
            border-color: #1890ff;
        }
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        .confirm-dialog {
            max-width: 400px;
        }
        .text-center {
            text-align: center;
            margin: 10px 0 20px;
            font-weight: normal;
        }
        .required {
            color: red;
            font-weight: bold;
        }
        .search-input-container {
            position: relative;
            display: flex;
        }
        .clear-btn {
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #ccc;
        }
        .btn-search {
            margin-left: -1px;
        }
        .row {
            display: flex;
            gap: 15px;
        }
        .col-6 {
            flex: 0 0 calc(50% - 7.5px);
        }
        .materials-table {
            margin: 20px 0;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 15px;
        }
        .add-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            margin-top: 10px;
            cursor: pointer;
            background-color: #f9f9f9;
        }
        .upload-area {
            border: 1px dashed #d9d9d9;
            border-radius: 4px;
            padding: 15px;
            margin-top: 5px;
        }
        .upload-placeholder {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            border: 1px dashed #d9d9d9;
            border-radius: 4px;
            background-color: #fafafa;
            cursor: pointer;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="page-title">申核</div>
        </div>

        <div class="toolbar">
            <button class="btn btn-primary" id="newBtn">新建</button>
            <button class="btn">删除</button>
            <button class="btn">编辑</button>
            <button class="btn">撤回</button>
            <button class="btn">审核</button>
        </div>

        <div class="search-area">
            <span class="search-label">项目名称：</span>
            <input type="text" class="search-input">
            <span class="search-label">创建人：</span>
            <input type="text" class="search-input">
            <button class="btn btn-primary">查询</button>
        </div>

        <table class="table">
            <thead>
                <tr>
                    <th width="4%"><input type="checkbox" id="checkAll"></th>
                    <th width="4%">No.</th>
                    <th width="18%">项目名称</th>
                    <th width="13%">项目编号</th>
                    <th width="13%">创建人</th>
                    <th width="13%">创建时间</th>
                    <th width="9%">状态</th>
                    <th width="16%">备注</th>
                    <th width="10%">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="rowCheckbox"></td>
                    <td>1</td>
                    <td>XXXXXX项目</td>
                    <td>xxxxxx</td>
                    <td>张三</td>
                    <td>2024-06-24</td>
                    <td class="status-pending">未提交</td>
                    <td>等待审核</td>
                    <td>
                        <button class="btn">查看</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="rowCheckbox"></td>
                    <td>2</td>
                    <td>YYYYYY项目</td>
                    <td>yyyyyy</td>
                    <td>李四</td>
                    <td>2024-06-24</td>
                    <td class="status-approved">已提交</td>
                    <td>已完成审核</td>
                    <td>
                        <button class="btn">查看</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 档案资料提交模态框（审核用） -->
    <div class="modal" id="documentModal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">归档资料审核</div>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div class="form-label">项目名称</div>
                    <div>XXXXXX项目</div>
                </div>
                <div class="form-group">
                    <div class="form-label">项目编号</div>
                    <div>02000001</div>
                </div>
                <div class="form-group">
                    <div class="form-label">项目金额（万）</div>
                    <div>128.00</div>
                </div>
                <div class="form-group">
                    <div class="form-label">项目负责人</div>
                    <div>张三</div>
                </div>
                <div class="form-group">
                    <div class="form-label">部门</div>
                    <div>技术部</div>
                </div>
                <div class="form-group">
                    <div class="form-label">验收状态</div>
                    <div>-</div>
                </div>

                <div class="form-group">
                    <div class="form-label">附件</div>
                    <div class="file-list">
                        <div class="file-item">
                            <img src="/assets/icons/pdf.svg" class="file-icon" alt="PDF">
                            <div class="file-name">项目验收报告(终稿).pdf</div>
                            <div class="file-size">120KB</div>
                            <button class="btn">下载</button>
                        </div>
                        <div class="upload-btn">+</div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">审核意见</label>
                    <textarea class="form-control" rows="4" placeholder="请输入..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn">取消</button>
                <button class="btn">暂存草稿</button>
                <button class="btn btn-primary">提交审核</button>
            </div>
        </div>
    </div>

    <!-- 新建验收档案资料一览表模态框 -->
    <div class="modal" id="newDocumentModal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">
                    <span>新增</span>
                </div>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <h3 class="text-center">验收归档资料一览表（系统集成类）</h3>
                
                <div class="form-group">
                    <label class="form-label">项目名称: <span class="required">*</span></label>
                    <div class="search-input-container">
                        <input type="text" class="form-control">
                        <span class="clear-btn">×</span>
                        <button class="btn btn-search">🔍</button>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">项目编号:</label>
                    <input type="text" class="form-control">
                </div>
                
                <div class="form-group row">
                    <div class="col-6">
                        <label class="form-label">创建人:</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="col-6">
                        <label class="form-label">创建日期:</label>
                        <input type="text" class="form-control">
                    </div>
                </div>
                
                <div class="materials-table">
                    <table class="table">
                        <thead>
                            <tr>
                                <th width="10%">序号</th>
                                <th width="45%">材料名称</th>
                                <th width="45%">资料上传</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>立项申请与批复资料</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>招标文件</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>中标的投标文件（正本）</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>中标通知书</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td><span class="required">*</span>合同文件</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td><span class="required">*</span>签收单</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>项目验收申请表</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>项目验收初验表</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td><span class="required">*</span>项目终验检查表</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td><span class="required">*</span>项目验收报告</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="add-btn">+</div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">备注:</label>
                    <textarea class="form-control" rows="3"></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label">附件</label>
                    <div class="upload-area">
                        <div class="upload-placeholder">+</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn">保存</button>
                <button class="btn btn-primary">验收申请</button>
                <button class="btn">取消</button>
            </div>
        </div>
    </div>

    <!-- 确认撤回对话框 -->
    <div class="modal" id="confirmModal">
        <div class="modal-content confirm-dialog">
            <div class="modal-header">
                <div class="modal-title">确认</div>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <p>请确认要从【验收申请表】工作台撤回当前项目吗？</p>
            </div>
            <div class="modal-footer">
                <button class="btn">取消</button>
                <button class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>

    <script>
        // 获取模态框元素
        const documentModal = document.getElementById('documentModal');
        const newDocumentModal = document.getElementById('newDocumentModal');
        const confirmModal = document.getElementById('confirmModal');
        const newBtn = document.getElementById('newBtn');
        const auditBtn = document.querySelector('.toolbar button:nth-child(5)');
        const checkAll = document.getElementById('checkAll');
        const rowCheckboxes = document.querySelectorAll('.rowCheckbox');
        const closeBtns = document.querySelectorAll('.close');

        // 跳转到新建档案资料页面
        newBtn.addEventListener('click', function() {
            window.location.href = 'pigeonhole/newinformation.html';
        });

        // 打开档案资料审核模态框
        auditBtn.addEventListener('click', function() {
            if (Array.from(rowCheckboxes).some(box => box.checked)) {
                documentModal.style.display = 'block';
            } else {
                alert('请先选择需要审核的项目');
            }
        });

        // 全选/取消全选
        checkAll.addEventListener('change', function() {
            rowCheckboxes.forEach(checkbox => {
                checkbox.checked = checkAll.checked;
            });
        });

        // 单个复选框状态变化
        rowCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const allChecked = Array.from(rowCheckboxes).every(box => box.checked);
                const someChecked = Array.from(rowCheckboxes).some(box => box.checked);
                
                checkAll.checked = allChecked;
                checkAll.indeterminate = someChecked && !allChecked;
            });
        });

        // 打开确认撤回对话框
        document.querySelector('.toolbar button:nth-child(4)').addEventListener('click', function() {
            confirmModal.style.display = 'block';
        });

        // 关闭模态框
        closeBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                documentModal.style.display = 'none';
                newDocumentModal.style.display = 'none';
                confirmModal.style.display = 'none';
            });
        });

        // 点击模态框外部关闭模态框
        window.addEventListener('click', function(event) {
            if (event.target === documentModal) {
                documentModal.style.display = 'none';
            }
            if (event.target === newDocumentModal) {
                newDocumentModal.style.display = 'none';
            }
            if (event.target === confirmModal) {
                confirmModal.style.display = 'none';
            }
        });
    </script>
</body>
</html>
